<template>
  <div>
    <headerView></headerView>
    <div class="login-container">
      <div class="space-6"></div>

      <div class="position-relative">
        <div id="signup-box" class="signup-box widget-box no-border">
          <div class="widget-body">
            <div class="widget-main">
              <h4 class="header green lighter bigger">
                <i class="ace-icon fa fa-users blue"></i>
                用户注册
              </h4>

              <div class="space-6"></div>
              <p>填写信息:</p>

              <form>
                <fieldset>
                  <label class="block clearfix">
                    <span class="block input-icon input-icon-left">
                      <input
                        type="text"
                        class="form-control"
                        placeholder="邮箱或手机号码"
                        v-model="tel"
                        @blur="checkTel"
                      />
                      <span class="errMess">{{errMess4}}</span>
                      <i class="ace-icon fa fa-envelope"></i>
                    </span>
                  </label>

                  <label class="block clearfix">
                    <span class="block input-icon input-icon-left">
                      <input
                        type="text"
                        class="form-control"
                        placeholder="用户名"
                        v-model="username"
                        @blur="checkUsername"
                      />
                      <span class="errMess">{{errMess1}}</span>
                      <i class="ace-icon fa fa-user"></i>
                    </span>
                  </label>

                  <label class="block clearfix">
                    <span class="block input-icon input-icon-left">
                      <input
                        type="password"
                        class="form-control"
                        placeholder="密码"
                        v-model="password"
                        @blur="checkPassword"
                      />
                      <span class="errMess">{{errMess2}}</span>
                      <i class="ace-icon fa fa-lock"></i>
                    </span>
                  </label>

                  <label class="block clearfix">
                    <span class="block input-icon input-icon-left">
                      <input
                        type="password"
                        class="form-control"
                        placeholder="确认密码"
                        v-model="confimpassword"
                        @blur="checkConfimPassword"
                      />
                      <span class="errMess">{{errMess3}}</span>
                      <i class="ace-icon fa fa-retweet"></i>
                    </span>
                  </label>
                  <!--验证码-->
                  <label class="block clearfix">
                    <span>
                      <input
                        type="text"
                        class=""
                        placeholder="验证码"
                        
                      />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <button class="btn btn-default">
                        <a>点击获取验证码</a>
                      </button>
                      <span class="errMess">请输入正确的验证码</span>
                    </span>
                  </label>
                  <label class="block">
                    <input type="checkbox" class="ace" />
                    <span class="lbl">
                      接受
                      <a href="#">用户协议</a>
                    </span>
                  </label>

                  <div class="space-24"></div>

                  <div class="clearfix">
                    <button type="reset" class="width-30 pull-left btn btn-sm">
                      <i class="ace-icon fa fa-refresh"></i>
                      <span class="bigger-110">重置</span>
                    </button>

                    <button @click="checkAll()"
                      type="button"
                      class="width-65 pull-right btn btn-sm btn-success"
                    >
                      <span class="bigger-110">注册</span>

                      <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
                    </button>
                  </div>
                </fieldset>
              </form>
              <!--第三方-->
              <div class="social-or-login center">
                <span class="bigger-110">第三方登录</span>
              </div>

              <div class="space-6"></div>

              <div class="social-login center">
                <a href="#">
                  <img src="images/weixin.png" />
                </a>

                <a href="#">
                  <img src="images/qq.png" />
                </a>

                <a href="#">
                  <img src="images/sina.png" />
                </a>
              </div>
            </div>

            <div class="toolbar center">
              <!-- <a
                href="login.html"
                data-target="#login-box"
                class="back-to-login-link"
              > -->
              <router-link to="/login" data-target="#login-box" class="back-to-login-link"><i class="ace-icon fa fa-arrow-left"></i>返回登录</router-link>
                
              <!-- </a> -->
            </div>
          </div>
          <!-- /.widget-body -->
        </div>
      </div>
    </div>
          <div id="bottom">
            <blowView></blowView>
          </div>
  </div>
</template>

<script>
import BlowView from './BlowView.vue';
export default {
  components: { BlowView },
  data () {
    return {
            username:'',
            errMess1:"",
            password:'',
            errMess2:"",
            confimpassword:'',
            errMess3:"",
            tel:'',
            errMess4:'',
    }
  },
  methods:{
            // 校验用户名是否符合要求
            checkUsername:function () {
              var usernameReg = /^[a-zA-Z0-9]{6,16}$/
              if (usernameReg.test(this.username)){
                  this.errMess1 = '√'
                  return true
              }else {
                this.errMess1='用户名应为6~16位数组和字母组成'
                return false
              }
            },
            // 校验密码是否符合要求
            checkPassword:function () {
              var passwordReg=/^[a-zA-Z0-9]{6,}$/
              if (passwordReg.test(this.password)){
                this.errMess2 = '√'
                return true
              }else {
                this.errMess2 = "密码的长度至少为6位"
                return false
              }
            },
            // 校验两次密码是否一致
            checkConfimPassword:function () {
                if (this.checkPassword()){
                  if (this.confimpassword == this.password){
                    this.errMess3 = '√'
                    return true
                  }else {
                    this.errMess3 = '两次输入的密码不同'
                    return false
                  }
                }
            },
            // 校验手机号是否正确
            checkTel:function () {
              var _this=this;
                var emailReg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                // 正则表达式验证手机号是否格式正确
                if (emailReg.test(this.tel)){
                  //失去焦点，判断手机号是否已存在
                    this.$axios.get('http://localhost:8080/telTest?phone='+this.tel).then(response => {
                        if(response.data.code==0){
                            this.errMess4 = response.data.msg
                            return false
                        }else{
                            _this.errMess4 = '√'
                            return true
                        }
            });
                }else {
                  this.errMess4 = '请输入正确的手机号格式'
                  return false
                }
            },
            // 检验所有格式是否正确
            checkAll:function () {
                if (!this.checkUsername()&this.checkPassword()&this.checkConfimPassword()&this.checkTel()){
                  event.preventDefault();
                }else{
                  let user={}
                  user.username=this.username,
                  // user.password=this.password,
                  user.password=this.$encryptionValue(this.password),
                  user.phone=this.tel
                  console.log(user)
                this.$axios.post('http://localhost:8080/register',user).then(response => {
                  if(response.data.code==0){
                this.errMsg4=response.data.msg;
                  }else{
                    this.$router.push("/index");
                  }
            });
                }
            }
  }
};
</script>

<style scoped>
@import url("../../public/css/bootstrap.min.css");
@import url("../../public/css/font-awesome.min.css");
@import url("../../public/css/base.css");
@import url("../../public/css/reg.css");
@import url("../../public/css/headbott.css");
@import url("../../public/css/ace.min.css");
</style>